<template>
  <div class="personal_center_main">
    <div class="navbar">
      <div class="personal_details_navbar">
        <div class="bg_path_opacity"></div>
        <div class="bg_path"></div>
        <div class="personal_details_navbar_box" v-if="is_login" >
          <div class="pics" style="width: 20%;text-align: center;">
            <img class="personal_details_navbar_box_img" :src="userAvatar"  @click="details">
          </div>
          <div class="personal_details_navbar_main"  @click="details">
            <div class="personal_details_navbar_name">
              <span>{{userName}}</span>
              <img class="img1" src="../../common/image/u3510.png" >
              <img class="img2" src="../../common/image/u3512.png" >
            </div>
            <div class="personal_details_navbar_email">
              <p>{{userEmail}}</p>
            </div>
          </div>
          <div class="personal_details_navbar_img_box">
            <div class="personal_details_navbar_img_box1">
              <img class="img1" src="../../common/image/u3510.png" >
              <img class="img2" src="../../common/image/u3512.png" >
              <p style="display: inline-block !important; font-size: 15px; margin-top: 2px;width: 36px;" @click="loginout">退出</p>
            </div>
            <div class="personal_details_navbar_img_box2" @click="details">
              <img src="../../common/image/u3470.png" style="margin-right: 7px;">
            </div>
          </div>
        </div>
        <div class="personal_details_navbar_box" @click="login" v-else >
          <div class="pics" style="width: 20%;text-align: center;">
            <img class="personal_details_navbar_box_img" src="../../common/image/icon_touxiang.png">
          </div>
          <div class="personal_details_navbar_main" >
            <div style="font-size: 18px;line-height: 1.5rem;">绑定会议账号</div>
          </div>
          <div class="personal_details_navbar_img_box">
            <div class="personal_details_navbar_img_box1">
              <img class="img1" src="../../common/image/u3510.png" >
              <img class="img2" src="../../common/image/u3512.png" >
            </div>
          </div>
        </div>
      </div>
      <div class="tag">
        <div class="personal_category">
          <span v-if="userTag.indexOf('1') != -1">作者</span>
          <span v-else>角色</span>
        </div>
        <div :class="userTag.indexOf('2') != -1?'personal_category':'personal_category cos'" >
          <span v-if="userTag.indexOf('2') != -1">创会者</span>
        </div>
        <div :class="userTag.indexOf('3') != -1?'personal_category':'personal_category cos'" >
          <span v-if="userTag.indexOf('3') != -1">审稿专家</span>
        </div>
      </div>
      <div class="personal_details_category">
        <!--<div class="personal_details_category_character">-->
          <!--<img src="../../common/image/xuezhe.png">-->
          <!--<p>角色</p>-->
        <!--</div>-->
        <div class="personal_details_category_main">
          <div class="personal_details_category_main_box">

          </div>
        </div>
      </div>
    </div>
    <div class="service_main">
      <div class="my_service" style="margin-left: 3px;">
        <img src="../../common/image/attention.png" alt="">
        <p>我的服务</p>
      </div>
      <div class="service_box">
        <div class="sign_in" v-on:click="scan">
          <img src="../../common/image/Sign-in.png" alt="会议签到">
          <span>会议签到</span>
        </div>
        <div class="sign_in" @click="mymeeting">
          <img src="../../common/image/u3498.png" alt="我的会议">
          <span>我的会议</span>
        </div>
        <div class="sign_in" @click="openmine">
          <img src="../../common/image/u3502.png" alt="我的投稿">
          <span>我的投稿</span>
        </div>
        <div class="sign_in" @click="follow">
          <img src="../../common/image/u3514.png" alt="我的关注">
          <span>我的关注</span>
        </div>
        <div class="sign_in" @click="video">
          <img src="../../common/image/u3518.png" alt="小视频">
          <span>小视频</span>
        </div>
        <div class="sign_in" @click="transact">
          <img src="../../common/image/transaction.png" alt="交易记录" >
          <span>交易记录</span>
        </div>
        <div class="sign_in" @click="invoice">
          <img src="../../common/image/invoice.png" alt="我的发票">
          <span>我的发票</span>
        </div>
        <div class="sign_in" @click="loginout" >     <!--logisty 方便测试登录注册页面使用-->
          <img src="../../common/image/Logistics.png" alt="物流查询">
          <span>物流查询</span>
        </div>
        <div class="sign_in" @click="suggest">
          <img src="../../common/image/u3545.png" alt="咨询留言">
          <span>咨询留言</span>
        </div>
      </div>
    </div>
    <!--<div class="footer_title">技术支持:广州科奥信息技术有限公司</div>-->
    <van-dialog v-model="show" show-cancel-button :before-close="beforeClose" title="登录 / 注册">
      <van-field v-model="account" type="text"  placeholder="请输入手机号码" />
      <van-field v-model="password" type="password"  placeholder="请输入密码" />
      <p class="tishi" v-show="active">账号或密码错误</p>
    </van-dialog>
  </div>
</template>
<script>
  import { Indicator,Toast,MessageBox } from 'mint-ui';
  import { RequestGet,RequestPost} from '@/api/http.js'
  import Axios from "axios";
  import Wx from 'weixin-js-sdk'
  export default {
    data (){
      return{
        path_on:this.$route.path,
        userName: '', //用户信息
        userEmail: '',//用户邮箱
        userAvatar: '',//用户头像
        userTag: '',//用户标签
        userId: '',//用户ID
        show: false,
        active:false,
        logins:false,
        password: '',
        account:'',
        is_login: false,
        code:'',
        loginshow:false
      }
    },
      created(){
          RequestPost({
              url: '/user/getSignPackage',
              data:{ url:encodeURIComponent(location.href.split('#')[0]) }  //向服务端提供授权url参数，并且不需要#后面的部分
          }).then((res)=>{
              console.log(res)
              Wx.config({
                  debug: false, // 开启调试模式,
                  appId: res.data.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                  timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                  nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                  signature: res.data.data.signature,// 必填，签名，见附录1
                  jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
          })
      },
    mounted () {
      this.getInfo();
    },
    methods: {
        scan() {
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage && storage.email){
                Wx.scanQRCode({
                    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        console.log(res)
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    }
                });
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        // getcode(){
        //     window.location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx261c6cc183219826&redirect_uri=http://m.keoconf.com' + this.$route.path + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        // },
        openmine(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                this.$router.push('/manuscript');
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }

        },
        mymeeting(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                Toast("开发中......");
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        follow(){
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                this.$router.push('/aca');
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        video(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                Toast("开发中......");
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        transact(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                Toast("开发中......");
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        invoice(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                Toast("开发中......");
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        logisty(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                Toast("开发中......");
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        suggest(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                this.$router.push('/message');
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
        loginout(){
            let self = this;
            let storage = JSON.parse(localStorage.getItem('login'));
            if(storage){
                MessageBox({
                    $type:'prompt',
                    title:'温馨提示',
                    message: '确定要退出吗?',
                    closeOnClickModal:false,   //点击model背景层不关闭MessageBox
                    showCancelButton:true,   //不显示取消按钮
                    showInput:false
                }).then(({ value, action }) => {
                    this.logins = true;
                    this.is_login = false;
                    this.userName = '';
                    this.userEmail = '';
                    this.userAvatar = '';
                    this.userTag = '';
                    this.userId = '';
                    this.account = '';
                    this.password = '';
                    localStorage.clear('login');
                }).catch(() => { });
            }else{
                Toast('请先登录！');
                setTimeout(function () {
                    self.login()
                }, 1000)
            }
        },
      getInfo() {
        let self = this;
        let storage = JSON.parse(localStorage.getItem('login'));
        if(storage && storage.id != undefined){
          self.is_login = true;
          self.userName = storage.username;
          self.userEmail = storage.email;
          self.userAvatar = storage.avatar;
          self.userTag = storage.tag;
          self.userId = storage.id;
        }
      },
      login(){
        this.$router.push('/login');
        this.show = true;
        this.loginshow = true;
      },
        beforeClose(action, done) {
            if (action === 'confirm') {
                if(this.password == '' || this.account == ''){
                    this.active = true;
                    done(false);
                }else {
                    this.active = false;
                    let user_storage = JSON.parse(localStorage.getItem('mp'));
                    RequestPost({url:'/user/index',data: {'username':this.account,'password':this.password,'bind':user_storage}}).then((respones)=>{
                        if(respones.data.code == 1){
                            this.is_login = true;
                            this.userName = respones.data.data.username;
                            this.userEmail = respones.data.data.email;
                            this.userAvatar = respones.data.data.avatar;
                            this.userTag = respones.data.data.tag;
                            this.userId = respones.data.data.id;
                            localStorage.setItem('login',JSON.stringify(respones.data.data))
                            Toast('登录成功！');
                            done();
                        }else{
                            Toast(respones.data.msg);
                            done(false);
                        }
                    })
                }
            } else {
                this.active = false;
                done();
            }
        },
      details(){
        let self = this;
        if(self.userId){
          self.$router.push(
            '/personal_details?uid='+self.userId
          )
        }
      }
    },
      beforeRouteEnter (to, from, next) {
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不！能！获取组件实例 `this`
          // 因为当钩子执行前，组件实例还没被创建
          var u = navigator.userAgent;
          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          console.log(u,isiOS)
          // XXX: 修复iOS版微信HTML5 History兼容性问题
          if (isiOS && to.path !== location.pathname) {
              // 此处不可使用location.replace
              location.assign(to.fullPath)
          } else {
              next()
          }
      }
  }
</script>

<style lang="scss" scoped>
  .personal_center_main {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 100px;
    padding-bottom: 1%;
    overflow: hidden;
    .navbar {
      width: 100%;
      .personal_details_navbar {
        width: 92%;
        height: 3.3rem;
        padding: 0.2rem 0;
        margin: 0 auto;
        border: none;
        .bg_path_opacity{
          width: 10rem;
          height: 10rem;
          position: absolute;
          top: -3.6rem;
          left: -2.3rem;
          border-radius: 50%;
          /*background: linear-gradient(to top right,#fff , #356aff);*/
          background: #557ae4;
          z-index: -1;
        }
        .bg_path{
          width: 14rem;
          height: 14rem;
          position: absolute;
          top: -7.8rem;
          right: -6rem;
          border-radius: 50%;
          background: #356aff;
          z-index: -2;
        }
        .personal_details_navbar_box {
          height: 3.2rem;
          width: 100%;
          margin-top: 0.5rem;
          display: flex;
          align-items: center;
          .personal_details_navbar_box_img {
            width: 150px;
            height: 150px;
            margin-left: 0.3rem;
            border-radius: 50%;
            background: #fff;
            border: 4PX solid #fff;
          }
          .personal_details_navbar_main {
            margin-left: 1.2rem;
            margin-top: -28PX;
            width: 60%;
            height: 1.5rem;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .personal_details_navbar_name {
              margin-top: 0rem;
              span{
                font-size: 40px;
              }
              .img1{
                width: 20PX;
                height: 20PX;
                display: inline-block;
                vertical-align: bottom;
                margin-left: 10PX;
              }
              .img2{
                width: 24PX;
                height: 24PX;
                margin-left: -18PX;
                vertical-align: super;
              }
            }
            .personal_details_navbar_email {
              text-align: center;
              margin-top: 24px;
              margin-left: -0.3rem;
              p{
                border: 1PX solid #fff;
                border-radius: 30px;
                font-size: 30px;
                padding:10px 15px;
                width: 4rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis
              }
            }
          }
          .personal_details_navbar_img_box {
            width: 20%;
            display: none;
            .personal_details_navbar_img_box1 {
              display: flex;
              margin-left: -0.34rem;
              margin-top: -30px;
            }
            .personal_details_navbar_img_box2 {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-right: 0.3rem;
              margin-top: 18px;
              img {
                height: 0.5rem;
              }
            }
            .personal_details_navbar_img_box3 {
              img {
                width: 0.15rem;
                height: 0.15rem;
              }
            }
          }
        }
      }
      .tag{
        position: fixed;top: 28px;right: 0;float: right;
        .personal_category{
          background: #45cdbe;
          color: #fff;
          padding-left: 10PX;
          height: 1rem;
          line-height: 1rem;
          font-size: 14PX;
          width: 1.6rem;
          border-radius: 20PX 0 0 20PX;
          margin-bottom: 10PX;
          position: absolute;
          text-align: center;
          right: 0;
          span{
            letter-spacing: 2PX;
          }
        }
        .personal_category:nth-child(2){
          background:#ff9549;
          top: 43PX;
        }
        .personal_category:nth-child(3){
          background:#f5d255;
          top: 86PX;
        }
        .cos{right: -45PX;}
      }

      .personal_details_category {
        width: 86%;
        height: 2.2rem;
        border-radius: 3PX;
        margin: 36px auto;
        box-shadow: 1PX 2PX 10PX grey;
        background-color: #fff;
        display: flex;
        visibility: hidden;
        .personal_details_category_character {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 20%;
          display: none;
          p {
            font-size: 0.4rem;
            margin-top: 0.2rem;
            letter-spacing: 0.2rem;
            margin-left: 20px;
          }
          img {
            margin-top: 0rem;
            width: 0.8rem;
          }
        }
        .personal_details_category_main {
          padding: 0.2rem 0rem 0.2rem 0.2rem;
          width: 80%;
          .personal_details_category_main_box {
            height: 1rem;
            display: flex;
            justify-content: space-around;
            .personal_category{
              display: flex;
              background-color: #fff;
              width: 2rem;
              height: 1rem;
              justify-content: center;
              align-items: center;
              font-size: 30px;
              color: #5894c8;
              border: 2px solid #5894c8;
              border-radius: 0.2rem;
            }
            .active {
              background-color: #5894c8;
              color: #fff;
            }
          }
        }
      }
    }
    .service_main {
      padding: 0.2rem;
      background: #fff;
      margin-top: -85PX;
      border-radius: 6PX;
      margin-left: 20PX;
      margin-right: 20PX;
      box-shadow: 1PX 4PX 10PX gainsboro;
      .my_service {
        display: flex;
        width: 100%;
        margin-top: 0.3rem;
        align-items: center;
        color: #9b9b9b;
        display: none;
        img {
          width: 0.4rem;
        }
        p {
          margin-left: 0.2rem;
          font-size: .3rem;
        }
      }
      .service_box {
        margin-left: -0.15rem;
        display: flex;
        margin-top: 0.3rem;
        width: 100%;
        flex-wrap: wrap;
        div {
          width:28%;
          margin-left: 0.4rem;
          margin-bottom: 0.35rem;
          border-radius: 0.1rem;
        }
        .sign_in {
          height: 2.5rem;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          overflow: hidden;
          img {
            width: 0.85rem;
            height: 0.85rem;
            background: #557ae4;
            box-shadow: 1PX 4PX 10PX gainsboro;
            border-radius: 50%;
            padding: 10PX;
            /*filter: drop-shadow(86PX 0 0 #3467fb);
            position: relative;
            left: -86PX;*/
          }
          span {
            margin-top: 0.5rem;
            font-size: 30px;
            color: #303030;
            /*background: #fff;*/
            /*padding: 4PX;*/
            /*box-shadow: 1PX 2PX 10PX #fff;*/
          }
}
}
}
    /*.footer_title{*/
      /*text-align: center;*/
      /*margin-top: 30PX;*/
      /*margin-bottom: 1rem;*/
      /*color: #eee;}*/
}
</style>
<style>

  #wxsys{background: none;color: #000;margin-top: 36px;}
  .van-dialog__footer{ border-top: 1px solid gainsboro;}
  .van-cell__title span{font-size: 30px;}
  .van-dialog__content{margin:30px;}
  .personal_center_main .van-field__control{width: 100%;background: transparent; padding: 20px 0;text-align: center;font-size: 30px;border: 0.025rem solid gray;border-radius: 10px;}
  .van-dialog__header{font-size: 34px;border-bottom: 1px solid gainsboro;padding-bottom: 30px;}
  .tishi{font-size: 26px; margin: 12px 0 30px 0;color: red;text-align: left;margin-left: 50px;}
  .outstyle{display: none!important;}
</style>

